<template>
    <div style="padding: 0px 0 0 0;">

        <a-form :labelCol="{ style: { width: '100px' }, }" class="form-p">
            <a-row :gutter="[24, 0]">
               
                <a-col :span="8">
                    <a-form-item label="名称">
                        <a-input v-model:value.trim="formState.name" placeholder="请输入名称" allowClear />
                    </a-form-item>
                </a-col>
                

                <a-col :span="8">
                    <a-form-item >
                        <a-space>
                            <a-button type="primary" @click="getList(1)">查询</a-button>
                            <a-button @click="formState = {}" type="primary">重置</a-button>

                        </a-space>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>

        <a-card>
            <div style="padding: 0 0 20px 0;">
                <a-button @click="toAdd" type="primary">新增</a-button>
            </div>
            <my-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered size="small" style=""
                :loading="loading" :scroll="{ x: 1000 }" :pagination="{
                    current: pageNum,
                    pageSize: pageSize,
                    total: totalCount,

                }" @change="tableChange">
                <template #bodyCell="{ index, column, record }">
                    <template v-if="column.dataIndex == 'index'">
                        {{ (pageNum - 1) * pageSize + index + 1 }}
                    </template>

                    <template v-if="column.dataIndex == 'streetName'">
                        {{ record.provinceName }}{{ record.cityName }}{{ record.areaName }}{{ record.streetName }}
                    </template>

                    <template v-if="column.key === 'action'">

                        <!-- <a-button @click="toDetail(record)" type="link">查看</a-button> -->
                        <a-button @click="toUpdate(record)" type="link">编辑</a-button>

                        <a-popconfirm title="确定删除？" ok-text="确定" cancel-text="取消" @confirm="remove(record)">
                            <a-button type="link">删除</a-button>
                        </a-popconfirm>

                    </template>
                </template>
            </my-table>
        </a-card>

        <AddCategory :visible="addVisible" @ok="getList(1)" @close="addVisible=false"></AddCategory>
        <UpdateCategory :visible="updateVisible" :category="updateData" @ok="getList(pageNum)" @close="updateVisible=false"></UpdateCategory>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue';
import lookPosition from '@/components/Amap/lookPosition.vue';
import startEndDateTime from '@/components/startEndDateTime.vue';
import { getCategoryList, deleteCategory } from '@/api/categoryApi'

import { useRouter } from "vue-router"
import type { Category } from '@/types/Category'
import { useCategoryStore } from '@/stores/category'
import { message } from 'ant-design-vue'


import { confirm } from '@/utils/confirm'

import AreaInput from '@/components/areaInput.vue';
import AddCategory from './addCategory.vue';
import UpdateCategory from './updateCategory.vue';

const router = useRouter()
const categoryStore = useCategoryStore()
const addVisible = ref(false)
const updateVisible = ref(false)

const updateData = ref<Category>({})
const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const dataSource = ref<Category[]>([]);
const columns = ref([
    { title: '序号', dataIndex: 'index', align: 'center' },

    { title: '名称', dataIndex: 'name', align: 'center' },


    { title: '操作', key: 'action', align: 'center', fixed: 'right', width: 350 },
]);

const formState = ref<any>({})


const getList = async (num: number) => {
    pageNum.value = num;

    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formState.value
    };

    loading.value = true;
    try {
        let res = await getCategoryList(params);
        dataSource.value = res.data.records;
        totalCount.value = res.data.total;
    } catch (error) {

    }
    loading.value = false;
};

const toAdd = () => {
    addVisible.value = true
    
}

const remove = async (record: Category) => {


    await deleteCategory(record.id as number)
    getList(pageNum.value)
    message.success('删除成功')

}

const toUpdate = (record: Category) => {
    updateData.value = record
    updateVisible.value= true
}



const toDetail = (record: Category) => {
    categoryStore.updateCategory = record
    router.push({
        path: '/category/lookCategory'
    })
}


const tableChange = (e: any) => {
    pageSize.value = e.pageSize
    getList(e.current)
};

onActivated(() => {
    if (categoryStore.reloadList) {
        categoryStore.reloadList = false
        getList(pageNum.value);
    }
})

onMounted(async () => {
    getList(1);

    // let res = await getStreet('350926')
    // categoryStore.regoinList = res.data as any
});
</script>

<style scoped></style>